<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>APIindex</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./lib/swiper-bundle.min.css">
    <link rel="stylesheet" href="./css/API.css">
</head>

<body>
    <!-- 头部 -->
    <header class="clearfix abs">
        <!-- logo -->
        <img src="./imgs/new-logo-white2.png" alt="源码数据" class="logo fl ">
        <!-- 导航 -->
        <ul class="nav fl abs">
            <li class="active"><a href="">首页</a></li>
            <li class="active"><a href="">API</a></li>
            <li class="active"><a href="">云服务</a></li>
            <li class="active"><a href="">案例</a></li>
            <li class="active"><a href="">开发者</a></li>
        </ul>
        <!-- 登录/注册 -->
        <div class="register fr mt20 mr30">
            <a href="">登录</a>
            <a href="" class="register-two">注册有礼</a>
        </div>
    </header>
    <!-- API分类 -->
    <div id="all" class="container clearfix">
        <h1>API分类</h1>
        <ul id="eat" class="eat">
            <!-- <li class="fl">全部</li>
            <li class="fl">生活服务</li>
            <li class="fl">金融科技</li>
            <li class="fl">交通地理</li>
            <li class="fl">充值缴费</li>
            <li class="fl">数据智能</li>
            <li class="fl">企业工商</li>
            <li class="fl">应用开发</li>
            <li class="fl">电子商务</li>
            <li class="fl">吃喝玩乐</li>
            <li class="fl">文娱视频</li>
            <li class="fl">免费接口大全</li>
            <li class="fl">短信</li>
            <li class="fl">汽车</li>
            <li class="fl">核验</li>
            <li class="fl">最早发布</li>
            <li class="fl">API私有化部署</li> -->
        </ul>
    </div>
    <!-- 搜索框 -->
    <div id="more" class="container">
        <div id="name">
            全部
            <input type="text" placeholder="身份证实名" id="keyword">
            <img src="./imgs/magnifier.png" alt="">
        </div>
        <!-- 图片 -->
        <ul>
            <li class="one fl">
                <div class="ten">
                    <img src="./imgs/API_01.jpg" alt="">
                    <p class="mt20">2021出行防疫政策指南</p>
                    <p class="free" style="font-size: 12px; color: greenyellow;margin-top: 15px;">免费</p>
                </div>
                <button class="abs">申请数据</button>
            </li>
            <li class="two fl">
                <div class="ten">
                    <p style="width:60px;height:20px;background-color:#f0fbff;font-size:12px;color:#3ccbff;">企业专用</p>
                    <img src="./imgs/API_02.jpg" alt="">
                    <p class="mt20">身份证实名认证</p>
                    <p class="price" style="font-size: 12px;color:red;">￥0.2000/次</p>
                </div>
                <button class="abs">申请数据</button>
            </li>
            <li class="one fl">
                <div class="ten">
                    <img src="./imgs/API_03.jpg" alt="">
                    <p class="mt20">天气预报</p>
                    <p class="frees" style="font-size: 12px; color: greenyellow;margin-top: 15px;">免费</p>
                </div>
                <button class="abs">申请数据</button>
            </li>
            <li class=" three fl">
                <div class="ten">
                    <p style="width:60px;height:20px;background-color:#f0fbff;font-size:12px;color:#3ccbff;">企业专用</p>
                    <img src="./imgs/API_04.jpg" alt="">
                    <p class="mt20">银行卡四元素校验</p>
                    <p class="price" style="font-size: 12px;color:red;">￥0.3360/次</p>
                </div>
                <button class="abs">申请数据</button>
            </li>
            <li class="four fl">
                <div class="ten">
                    <p class="mt20" style="width:60px;height:20px;background-color:#f0fbff;font-size:12px;color:#3ccbff;margin-top: 3px;margin-left: 0;">企业专用</p>
                    <img src="./imgs/API_05.jpg" alt="">
                    <p class="mt20" style="margin-top: 20px;">短信API服务</p>
                    <p class="price"  style="font-size: 12px;color:red;">￥0.0400/次</p>
                </div>
                <button class="abs">申请数据</button>
            </li>
            <li class="one fl">
                <div class="ten">
                    <img src="./imgs/API_01.jpg" alt="">
                    <p class="mt20">2021出行防疫政策指南</p>
                    <p class="free" style="font-size: 12px; color: greenyellow;margin-top: 15px;">免费</p>
                </div>
                <button class="abs">申请数据</button>
            </li>
            <li class="two fl">
                <div class="ten">
                    <p style="width:60px;height:20px;background-color:#f0fbff;font-size:12px;color:#3ccbff;">企业专用</p>
                    <img src="./imgs/API_02.jpg" alt="">
                    <p class="mt20">身份证实名认证</p>
                    <p class="price" style="font-size: 12px;color:red;">￥0.2000/次</p>
                </div>
                <button class="abs">申请数据</button>
            </li>
            <li class="one fl">
                <div class="ten">
                    <img src="./imgs/API_03.jpg" alt="">
                    <p class="mt20">天气预报</p>
                    <p class="frees" style="font-size: 12px; color: greenyellow;margin-top: 15px;">免费</p>
                </div>
                <button class="abs">申请数据</button>
            </li>
            <li class=" three fl">
                <div class="ten">
                    <p style="width:60px;height:20px;background-color:#f0fbff;font-size:12px;color:#3ccbff;">企业专用</p>
                    <img src="./imgs/API_04.jpg" alt="">
                    <p class="mt20">银行卡四元素校验</p>
                    <p class="price" style="font-size: 12px;color:red;">￥0.3360/次</p>
                </div>
                <button class="abs">申请数据</button>
            </li>
            <li class="four fl">
                <div class="ten">
                    <p class="mt20" style="width:60px;height:20px;background-color:#f0fbff;font-size:12px;color:#3ccbff;margin-top: 3px;margin-left: 0;">企业专用</p>
                    <img src="./imgs/API_05.jpg" alt="">
                    <p class="mt20" style="margin-top: 20px;">短信API服务</p>
                    <p class="price"  style="font-size: 12px;color:red;">￥0.0400/次</p>
                </div>
                <button class="abs">申请数据</button>
            </li>
            <li class="one fl">
                <div class="ten">
                    <img src="./imgs/API_01.jpg" alt="">
                    <p class="mt20">2021出行防疫政策指南</p>
                    <p class="free" style="font-size: 12px; color: greenyellow;margin-top: 15px;">免费</p>
                </div>
                <button class="abs">申请数据</button>
            </li>
            <li class="two fl">
                <div class="ten">
                    <p style="width:60px;height:20px;background-color:#f0fbff;font-size:12px;color:#3ccbff;">企业专用</p>
                    <img src="./imgs/API_02.jpg" alt="">
                    <p class="mt20">身份证实名认证</p>
                    <p class="price" style="font-size: 12px;color:red;">￥0.2000/次</p>
                </div>
                <button class="abs">申请数据</button>
            </li>
            <li class="one fl">
                <div class="ten">
                    <img src="./imgs/API_03.jpg" alt="">
                    <p class="mt20">天气预报</p>
                    <p class="frees" style="font-size: 12px; color: greenyellow;margin-top: 15px;">免费</p>
                </div>
                <button class="abs">申请数据</button>
            </li>
            <li class=" three fl">
                <div class="ten">
                    <p style="width:60px;height:20px;background-color:#f0fbff;font-size:12px;color:#3ccbff;">企业专用</p>
                    <img src="./imgs/API_04.jpg" alt="">
                    <p class="mt20">银行卡四元素校验</p>
                    <p class="price" style="font-size: 12px;color:red;">￥0.3360/次</p>
                </div>
                <button class="abs">申请数据</button>
            </li>
            <li class="four fl">
                <div class="ten">
                    <p class="mt20" style="width:60px;height:20px;background-color:#f0fbff;font-size:12px;color:#3ccbff;margin-top: 3px;margin-left: 0;">企业专用</p>
                    <img src="./imgs/API_05.jpg" alt="">
                    <p class="mt20" style="margin-top: 20px;">短信API服务</p>
                    <p class="price"  style="font-size: 12px;color:red;">￥0.0400/次</p>
                </div>
                <button class="abs">申请数据</button>
            </li>
            <li class="one fl">
                <div class="ten">
                    <img src="./imgs/API_01.jpg" alt="">
                    <p class="mt20">2021出行防疫政策指南</p>
                    <p class="free" style="font-size: 12px; color: greenyellow;margin-top: 15px;">免费</p>
                </div>
                <button class="abs">申请数据</button>
            </li>
            <li class="two fl">
                <div class="ten">
                    <p style="width:60px;height:20px;background-color:#f0fbff;font-size:12px;color:#3ccbff;">企业专用</p>
                    <img src="./imgs/API_02.jpg" alt="">
                    <p class="mt20">身份证实名认证</p>
                    <p class="price" style="font-size: 12px;color:red;">￥0.2000/次</p>
                </div>
                <button class="abs">申请数据</button>
            </li>
            <li class="one fl">
                <div class="ten">
                    <img src="./imgs/API_03.jpg" alt="">
                    <p class="mt20">天气预报</p>
                    <p class="frees" style="font-size: 12px; color: greenyellow;margin-top: 15px;">免费</p>
                </div>
                <button class="abs">申请数据</button>
            </li>
            <li class=" three fl">
                <div class="ten">
                    <p style="width:60px;height:20px;background-color:#f0fbff;font-size:12px;color:#3ccbff;">企业专用</p>
                    <img src="./imgs/API_04.jpg" alt="">
                    <p class="mt20">银行卡四元素校验</p>
                    <p class="price" style="font-size: 12px;color:red;">￥0.3360/次</p>
                </div>
                <button class="abs">申请数据</button>
            </li>
            <li class="four fl">
                <div class="ten">
                    <p class="mt20" style="width:60px;height:20px;background-color:#f0fbff;font-size:12px;color:#3ccbff;margin-top: 3px;margin-left: 0;">企业专用</p>
                    <img src="./imgs/API_05.jpg" alt="">
                    <p class="mt20" style="margin-top: 20px;">短信API服务</p>
                    <p class="price"  style="font-size: 12px;color:red;">￥0.0400/次</p>
                </div>
                <button class="abs">申请数据</button>
            </li>
        </ul>
        <!-- 页数 -->
        <div class="number  clearfix">
            <div class="pages clearfix">
                <div id="pagelist" class="fl">
                    <a href="" class="active">1</a>
                    <a href="">2</a>
                    <a href="">3</a>
                    <a href="">4</a>
                    <a href="">5</a>
                    <a href="">6</a>
                    <a href="">7</a>
                    <a href="">8</a>
                </div>
                <p class="fl" style="font-size: 16px;margin-top:2px;cursor:pointer">下一页></p>
            </div>
        </div>
    </div>
    <!-- 尾部 -->
    <div id="foot" class="container clearfix">
        <ul>
            <li class="fl">
                <h5>联系与支持</h5>
                <p class="mt15">400-882-7715</p>
                <p>售前咨询</p>
                <p>客服&售后</p>
                <p>常见问题</p>
                <p>极速工单</p>
                <p>投诉与建议</p>
            </li>
            <li class="fl">
                <h5>关于源码</h5>
                <p class="mt15">合作伙伴</p>
                <p>服务条款</p>
                <p>隐私政策</p>
                <p>市场合作</p>
                <p>反商业贿赂声明</p>
            </li>
            <li class="fl">
                <h5>快速入口</h5>
                <p class="mt15">API数据</p>
                <p>黑钻会员</p>
                <p>新闻动态</p>
                <p>联系我们</p>
                <p>加入我们</p>
            </li>
            <li class="fl">
                <h5>产品服务</h5>
                <p class="mt15">云监测</p>
                <p>云查询</p>
                <p>云助手</p>
                <p>聚盒子</p>
                <p>云充值</p>
            </li>
            <li class="fl">
                <h5>解决方案</h5>
                <p class="mt15">数字中台</p>
                <p>慧集:API生命周期管理</p>
                <p>有赢:助力企业营销</p>
            </li>
        </ul>
        <!-- 二维码 -->
        <div class="right fr">
            <h5>微信公众号</h5>
            <p class="mt15">源码时代</p>
            <img src="./imgs/showqrcode.jpg" alt="" width="100px" height="100px">
        </div>

    </div>
    <!-- footer-->
    <footer class="container clearfix">
        <!-- 左边 -->
        <div class="police">
            <div class="fl">
                <img src="./imgs/bei1.png" alt="">
                <img src="./imgs/bei2.png" alt="">
            </div>
            <p class="fl">增值电信业务经营许可证:蜀B2-20180596蜀ICP备15006450号-3营业执照            </p>
        </div>
        <!-- 右边 -->
        <div class="fr">
            <p class="words">源码大数据股份有限公司©版权所有</p>
            <div id="returnTop">
                <img src="./imgs/retun.png" alt="" width="40px" height="40px">
            </div>
        </div>
    </footer>





        <!-- 引入swiper插件库 -->
        <script src="./lib/swiper-bundle.min.js"></script>
        <script src="./js/APIindex.js"></script>
</body>

</html>